<template>
	<div>
		<toubu></toubu>
		<!--菜单-->
		<menulist></menulist>
		<!--右边图片部分-->
		<div class="right">
			<img class="datu" src="../assets/img/fenlei/xinde.png"/>
			
			<div class="email">
				<div class="riben"><img src="../assets/img/fenlei/japan.png"/><p>日本直邮</p></div>
				<div class="usa"><img src="../assets/img/fenlei/meiguo.png"/><p>美国直邮</p></div>
				<div class="english"><img src="../assets/img/fenlei/uk.png"/><p>英国直邮</p></div>
				<div class="ao"><img src="../assets/img/fenlei/ao.png"/><p>澳洲直邮</p></div>
				<div class="china"><img src="../assets/img/fenlei/china.png"/><p>中国直邮</p></div>
			</div>
			<div class="line"></div>
			<p class="biaoti">热卖品类</p>
			<div class="hot">
				<div class="jiemain"><img src="../assets/img/fenlei/jiemian.png"/><p>洁面护理</p></div>
				<div class="hong"><img src="../assets/img/fenlei/kouh.png"/><p>美国直邮</p></div>
				<div class="bao"><img src="../assets/img/fenlei/bag.png"/><p>英国直邮</p></div>
				<div class="jiemain1"><img src="../assets/img/fenlei/jiemian.png"/><p>洁面护理</p></div>
				<div class="hong1"><img src="../assets/img/fenlei/kouh.png"/><p>美国直邮</p></div>
				<div class="bao1"><img src="../assets/img/fenlei/bag.png"/><p>英国直邮</p></div>
			</div>
		</div>
		<dibu></dibu>
		
	</div>
</template>

<script>
		
	import toubu from '@/components/head'
	import dibu from '@/components/footer'
	import menulist from '@/components/menu'
	
	export default {
		components: {
			toubu,
			dibu,
			menulist
		},
		methods:{
			round:function(){
				$('.left ul li').click(function() {
					$(this).addClass('active').siblings("li").removeClass('active');
				});
			}
		},
		mounted:function(){
			this.round();
		}
	}
</script>

<style>
	
	.right{
		margin-top: 9.7rem;
		float: left;
		
	}
	.right .datu{
		width: 50.7rem;
		margin-left: 2rem;
		margin-top: 1.8rem;
	}
	.email{
		width: 50.7rem;
		margin-left: 2rem;
		font-size: 2.8rem;
		overflow: hidden;
		}
	.email div{ 
		float: left;
		margin-top: 4.8rem;
		margin-left: 4.5rem;
	}
	.email div p{
		margin-top: 3.6rem;
	}
	.riben img,.english img,.usa img,.ao img,.china img{
		height: 4.8rem;
		width: 4.8rem;
	}
	.right .line{
		width: 50.7rem;
		height: 0.1rem;
		box-shadow: 0rem 0.05rem 0.1rem dimgrey;
		background: gainsboro;
		margin-top: 3rem;
		margin-left: 2rem;
	}
	.biaoti{
		margin-top: 1rem;
		margin-left: 2rem;
		text-align: left;
		font-size: 2.7rem;
	}
	.hot{
		position: relative;
		width: 45rem;
		height: 36rem;
		left: 3.3rem;
		top: 4.5rem;
		
	}
	.hot>div{
		width: 13.4rem;
		
	}
	.jiemain ,.hong ,.bao,.jiemain1 ,.hong1 ,.bao1{
		font-size: 2.4rem;
	}  
	.jiemain img,.hong img,.bao img{
		width: 13.4rem;
		height: 10.8rem;
	}
	.jiemain1 img,.hong1 img,.bao1 img{
		width: 13.4rem;
		height: 10.8rem;
	}
	.jiemain{
		position: absolute;
		left: 0;
		top: 0;
	}
	.hong{
		position: absolute;
		left: 19rem;
		top: 0;
	}
	.bao{
		position: absolute;
		left: 36rem;
		top: 0;
	}
	.jiemain1{
		position: absolute;
		left: 0;
		top: 20.5rem;
	}
	.hong1{
		position: absolute;
		left: 19rem;
		top: 20.5rem;
	}
	.bao1{
		position: absolute;
		left:36rem;
		top: 20.5rem;
	}
</style>